<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!-- css -->
<link id="v_theme" href="../../src/css/theme/aristo/theme.css" rel="stylesheet" type="text/css" />
<link href="../../src/css/primeui-1.1-min.css" rel="stylesheet" type="text/css" />
<!--lib js  -->
<script type="text/javascript" src="../../src/lib/vue.js"></script>
<script type="text/javascript" src="../../src/lib/jquery.min.js"></script>
<!-- js加载器 -->
<script type="text/javascript" src="../../src/loader/loader.js"></script>
</script>

<style type="text/css">
.success{color: green;}
.error{color: red;}
</style>
<script type="text/javascript" src="../js/theme.js"></script></head>
<body>

<!-- 全局错误信息 -->
<div id="msg"></div>

<form id="ff">
验证结果:<span id="result"></span><br>
<table>
	<tr> <td>验证正整数:</td> <td id="t1">
	<input msgId="msgId1" name="name1"
	rules="[{rule:{positiveInt:true},successMsg:'√',errorMsg:'X 请输入整整数'}]" />
	</td> <td id="msgId1"></td> </tr>
	<tr> <td>验证自然数(长度4~10):</td> <td id="t2">
	<input msgId="msgId2"  name="name2"
	rules="[{rule:{naturalNum:true},successMsg:'√',errorMsg:'请输入自然数'}
			,{rule:{minLength:4,maxLength:10},successMsg:'√',errorMsg:'长度必须为4~10'}
			]" />
	</td> <td id="msgId2"></td> </tr>
	<tr> <td>验证正数:</td> <td id="t3">
	<input msgId="msgId3" name="name3"
	rules="[{rule:{positiveNum:true,notNull:true},successMsg:'√',errorMsg:'请输入大于零的数'}]" />
	</td> <td id="msgId3"></td> </tr>
	<tr> <td>验证浮点数:</td> <td id="t4">
	<input msgId="msgId4" 
	rules="[{rule:{floatNum:true,notNull:true},successMsg:'√',errorMsg:'请输入浮点数'}]" />
	</td> <td id="msgId4"></td> </tr>
	<tr> <td>验证正浮点数:</td> <td id="t5">
	<input msgId="msgId5" 
	rules="[{rule:{positiveFloatNum:true,notNull:true},successMsg:'√',errorMsg:'请输入正浮点数'}]" />
	</td> <td id="msgId5"></td> </tr>
	<tr> <td>验证非负浮点数:</td> <td id="t6">
	<input msgId="msgId6" 
	rules="[{rule:{notNegativeFloatNum:true},successMsg:'√',errorMsg:'请输入非负浮点数'}]" />
	</td> <td id="msgId6"></td> </tr>
	<tr> <td>验证邮箱:</td> <td id="t7">
	<input msgId="msgId7" 
	rules="[{rule:{email:true},successMsg:'√',errorMsg:'请输入正确的邮箱'}]" />
	</td> <td id="msgId7"></td> </tr>
	<tr> <td>验证手机号:</td> <td id="t8">
	<input msgId="msgId8" 
	rules="[{rule:{mobile:true},successMsg:'√',errorMsg:'请输入正确的手机号'}]" />
	</td> <td id="msgId8"></td> </tr>
	<tr> <td>验证电话:</td> <td id="t9">
	<input msgId="msgId9" 
	rules="[{rule:{tel:true},successMsg:'√',errorMsg:'请输入正确的电话号'}]" />
	</td> <td id="msgId9"></td> </tr>
	<tr> <td>passValidate="true"属性:</td> <td id="t9">
	<input msgId="msgId9" passValidate="true"
	rules="[{rule:{tel:true},successMsg:'√',errorMsg:'请输入正确的电话号'}]" />
	</td> <td id="msgId9">passValidate="true"可以跳过验证</td> </tr>
</table>
</form>
<br>
<button onclick="formValidate()">validateForm()</button>

<hr>
自定义验证(大于10的数):
<br />
<input id="f2" type="text" rules="[{validateHandler:validateFunc}]" />
<button onclick="validateMySelf()">自定义验证</button>
<hr>

<form id="ff2">
	<select name="single">
    <option value="1">Single</option>
    <option value="2">Single2</option>
    <option value="3">Single3</option>
  </select>
  <br/>
  <input type="text" name="t1" value="11"/> <br/>
  <textarea name="t2" rows="" cols=""></textarea><br/>
  <input type="checkbox" name="check" value="1"/> check1
  <input type="checkbox" name="check" value="2" checked="checked"/> check2
  <br/>
  <input type="radio" name="radio" value="1" checked="checked"/> radio1
  <input type="radio" name="radio" value="2"/> radio2
</form>
<br>
<button onclick="getData()">getData()</button>
<button onclick="clear1()">clear()</button>
<button onclick="reset()">reset()</button>
<button onclick="load()">load()</button>
<button onclick="loadByUrl()">loadByUrl()</button>
<button onclick="submit()">submit()</button>

<script type="text/javascript">

VUI
.dir('../../src/') // 设置JS存放根目录
.use('Form',function(){
	
	form = new VUI.Form({
		formId:'ff'
	});
	form2 = new VUI.Form({
		formId:'ff2'
		,onLoadSuccess:function(data) {
			console.log('onLoadSuccess..')
			console.log(data)
		}
	});
	
	$('#f2').buildRules();
	
});

function formValidate() {
	form.validate();
}
function getData() {
	var data = form2.getData();
	console.log(data)
}
function reset() {
	form2.reset();
}
function clear1() {
	form2.clear();
}
function load() {
	form2.load({
		single:3
		,t1:'t1text'
		,t2:'t2aaaa'
		,check:[1,2]
		,radio:2
	});
}
function loadByUrl() {
	var url = 'http://localhost:8087/emptyProject/listEasyuiOrderInfo_backuser.do';
	form2.load(url);
}

function submit() {
	var url = 'http://localhost:8087/emptyProject/listEasyuiOrderInfo_backuser.do';
	form2.submit({
		url:url
		,onSubmit: function(){
			return this.validate();	// 返回false终止表单提交
		}
		,success: function(data){
			console.log('submit success.');
			console.log(data);
		}

	});
}

function validateMySelf() {
	alert($('#f2').validate())
}

//自定义验证方法,验证是否大于10
function validateFunc(val) {
	if(isNaN(val)) {
		return false;
	}
	return val > 10;
}


</script>
</body>
</html>